<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <style type="text/css">
            *{
                padding:0px;
                margin:0px;
                font-size: 12px;
                
            }
            body {
                padding:40px;
                
            }
            .topicList {
                width: 300px;
                border: 1px solid #999;
            }
            
            .topicList li {
                list-style: none;
                padding: 8px 0px;
                margin-left: 10px;
                border-bottom: 1px dotted #aaa;
            }
            .topicList ul {
                display: none;
            }
            
            .topicList h3 {
                height:30px;
                background: #347;
                color:#fff;
                border-bottom: 1px solid #fff;
                cursor: pointer;
            }
            /*  写样式的时候尽量使用class
                
            */
            .topicList h3 span {
                position: relative;
                left: 15px;
                top:10px;
            }
        </style>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(function(){
//                $(".topicList h3").click(function(){
//                    var uln = $(this).next("ul");
//                    if(uln.css("display")=="none") {
//                        uln.css("display","block");
//                    } else {
//                        uln.css("display","none");
//                    }
//                });
//                
                //1.11.3和1.8.3不一样
//                $(".topicList h3").toggle(function(){
//                    $(this).next("ul").css("display","block"); 
//                },function(){
//                    $(this).next("ul").css("display","none");
//                });

                //可以使用jquery提供的show和hide来完成带缓动的隐藏和显示效果
                //由于两个方法比较类似 可以直接使用toggle来完成操作
//                $(".topicList h3").toggle(function(){
//                    $(this).next("ul").show(1000); 
//                },function(){
//                    $(this).next("ul").hide(1000);
//                });
                
                //toggle 如果有两个参数 并且都是函数
                //第一次点击执行第一个函数
                //第二次点击执行第二个函数
                $(".topicList h3").toggle(topicHandler,topicHandler
                );
                
                function topicHandler() {
                    //使用fadeIn show slideDown 可以完成某个容器的显示
                    //fadeOut hide slideUp 可以完成某个容器的隐藏
                    //所以通过各个的toggle来完成两个之间的轮换
                    $(this).next("ul").slideToggle(1000);
                }
            });
            
        </script>
    </head>
    <body>
        <div class="topicList">
            <h3>
                <span>
                    学习天地
                </span>
            </h3>
            <ul>
                <li>关于想学习两块手机的考虑1</li>
                <li>关于想学习两块手机的考虑2</li>
                <li>关于想学习两块手机的考虑3</li>
                <li>关于想学习两块手机的考虑4</li>
                <li>关于想学习两块手机的考虑5</li>
                <li>关于想学习两块手机的考虑6</li>
                <li>关于想学习两块手机的考虑7</li>
                <li>关于想学习两块手机的考虑8</li>
                <li>关于想学习两块手机的考虑9</li>
                <li>关于想学习两块手机的考虑0</li>
            </ul>
        </div>
    </body>
</html>
